import { Form, Input, DatePicker, Space, Button, message, Upload } from "antd";
import React, { useState } from "react";
import { UploadOutlined } from '@ant-design/icons';
const WageManage = (props) => {
  const [fileList, setFileList] = useState([]);
  const [uploading, setUploading] = useState(false);
  const { couponId, indcutsValue, handleCancel } = props
  // console.log(props);
  const handleUpload = () => {
    const formData = new FormData();
    fileList.forEach((file) => {
      formData.append('file', file);
    });
    formData.append('couponId', couponId)
    setUploading(true); // You can use any AJAX library you like

    fetch(React.$BaseUrl + '/admin/memberCoupon/addBatch/file', {
      method: "post",
      headers: {
        RSnetToken: sessionStorage.getItem('RSnetToken')
      },
      body: formData,
    })
      .then((res) => {
        res.json().then(res => {
          if (res.code === 0 && res.data) {
            setFileList([]);
            let len = res.data.length
            message.success('成功发放' + len + '张优惠券')
            handleCancel()
          } else if (res.data === null) {
            setFileList([]);
            message.error("文件内容异常，请检查文件重新上传");
          } else {
            message.error(res.codeMessage)
          }
        })
      })
      .catch((res) => {
        console.log(res);
        message.error('上传失败.');
      })
      .finally(() => {
        setUploading(false);
      });
  };

  const filedata = {
    accept: ".xls,.xlsx,application/vnd.ms-excel",
    maxCount: 1,
    onRemove: (file) => {
      const index = fileList.indexOf(file);
      const newFileList = fileList.slice();
      newFileList.splice(index, 1);
      setFileList(newFileList);
    },
    beforeUpload: (file) => {
      setFileList([...fileList, file]);
      return false;
    },
    fileList,
  };
  return (
    <>
      <div>
        <span style={{ lineHeight: "50px", marginRight: "10px" }}>优惠券名称:</span>
        {indcutsValue.couponTitle}
      </div>
      <div>
        <span style={{ lineHeight: "50px", marginRight: "10px" }}>上传Excel:</span>
        <Upload {...filedata}>
          <Button icon={<UploadOutlined />}>选择文件</Button>
        </Upload>
      </div>

      <Button
        type="primary"
        onClick={handleUpload}
        disabled={fileList.length === 0}
        loading={uploading}
        style={{
          marginTop: 16,
        }}
      >
        {uploading ? 'Uploading' : '提交'}
      </Button>
    </>
  );
};
// class WageManage extends React.Component {
//   state = {
//     couponId: "",
//     fileList:[],
//   };

//   componentDidMount() {
//     if (this.props.type === 'indcuts') {
//       this.setState({
//         couponId: this.props.couponId,
//       })
//       let value = { ...this.props.indcutsValue }
//       this.formRef.setFieldsValue({ ...value })
//     }
//   }

//   beforeUpload = (file)=>{
//     console.log(file);
//     let files = this.state.fileList.push(file)
//     this.setState({file:Base64.encode(files)},()=>{
//       console.log(this.state.fileList);
//     })
//     return false

//   }
//   uploadChange = (info)=>{
//     const {fileList} = this.state
//     let files = Base64.encode(fileList)
//     this.setState({file: files})
//     console.log(this.state.fileList);
//     return false;
//   }
//   customRequest = async ()=>{

//     const {fileList,couponId} = this.state;
//     React.$post('/admin/memberCoupon/addBatch/file',{couponId:couponId,file:fileList}).then(res=>{
//       console.log(res);
//     })
//   }
//   onFinish =  () => {
//     this.customRequest()
//   }
//   render() {
//     const { loading, couponId,fileList } = this.state;
//     const filedata = {
//       multiple:true,
//       name: 'file',
//       // action: '/admin/memberCoupon/addBatch/file',
//       maxCount:1,
//       accept:".xls,.xlsx,application/vnd.ms-excel",     
//       headers:{
//         authorization: 'authorization-text',
//       },
//       data:{
//         couponId:couponId
//       },
//       showUploadList: true,
//       beforeUpload:this.beforeUpload,
//       customRequest:this.customRequest,
//     };
//     return (
//       <div>
//         <Form ref={ref => this.formRef = ref} onFinish={this.onFinish}>
//           <Form.Item label="优惠券标题" name="couponTitle" rules={[{ required: true }]}>
//             <Input />
//           </Form.Item>
//           <Form.Item label="上传Excel"  rules={[{ required: false }]}>
//             <div key={Math.random()}>
//               <Upload {...filedata}>
//                 <Button icon={<UploadOutlined />}>手动上传Excel</Button>
//               </Upload>
//               <IndcutsExcel couponId={couponId} />
//             </div>

//           </Form.Item>
//           <Form.Item>
//             <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: -30 }}>
//               <Space>
//                 <Button onClick={this.props.handleCancel}>取消</Button>
//                 <Button loading={loading} htmlType="submit" type="primary">保存</Button>
//               </Space>
//             </div>
//           </Form.Item>
//         </Form>
//       </div>
//     );
//   }
// }

export default WageManage;
